<template>
  <div class="lol-box">
    <van-nav-bar
      title="联盟"
      :border="false"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!--  -->
    <div class="fis">
      <li>
        <div></div>
        <p>联盟排名</p>
      </li>
      <li>
        <div></div>
        <p>创建联盟</p>
      </li>
      <li>
        <div></div>
        <p>查找联盟</p>
      </li>
    </div>
    <!--  -->
    <div class="swi">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img width="100%" src="https://img0.baidu.com/it/u=851604471,3152281289&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=2234011205,2670673848&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=612174037,3468779771&fm=253&fmt=auto&app=138&f=PNG?w=889&h=500" alt=""></van-swipe-item>
  <van-swipe-item><img width="100%" src="https://img2.baidu.com/it/u=676014679,3004618896&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" alt=""></van-swipe-item>
</van-swipe>
    </div>
    <!--  -->
    <div class="list">
      <li>
        <div class="li-img">
            <img width="100%" src="https://img2.baidu.com/it/u=1765533993,2906545429&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200" alt="">
        </div>
        <div class="li-p">
          <h3>任我行团伙</h3>
          <h4>盟主：。。。</h4>
          <p>社交牛逼症患者聚集处</p>
        </div>
        <div class="li-btn">
            <p>18/200</p>
            <div>申请</div>
        </div>
      </li>
      <!--  -->
      <li>
        <div class="li-img">
            <img width="100%" src="https://img0.baidu.com/it/u=3280003426,3753920673&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
        </div>
        <div class="li-p">
          <h3>任我行团伙</h3>
          <h4>盟主：。。。</h4>
          <p>社交牛逼症患者聚集处</p>
        </div>
        <div class="li-btn">
            <p>18/200</p>
            <div>申请</div>
        </div>
      </li>
      <!--  -->
      <li>
        <div class="li-img">
            <img width="100%" src="https://img0.baidu.com/it/u=3670790657,4218765953&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
        </div>
        <div class="li-p">
          <h3>任我行团伙</h3>
          <h4>盟主：。。。</h4>
          <p>社交牛逼症患者聚集处</p>
        </div>
        <div class="li-btn">
            <p>18/200</p>
            <div>申请</div>
        </div>
      </li>
      <!--  -->
      <li>
        <div class="li-img">
            <img width="100%" src="https://img1.baidu.com/it/u=1713158300,1412679338&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="">
        </div>
        <div class="li-p">
          <h3>任我行团伙</h3>
          <h4>盟主：。。。</h4>
          <p>社交牛逼症患者聚集处</p>
        </div>
        <div class="li-btn">
            <p>18/200</p>
            <div>申请</div>
        </div>
      </li>
      <!--  -->
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      //  Toast('返回');
      this.$router.push("find");
      // console.log(1);
    },
    onClickRight() {
      //   Toast('按钮');
    },
    },
    created() {
        
  }
};
</script>

<style lang="scss" >
.lol-box {
  color: white;
  width: 100%;
  margin: 0 auto;
//   轮播图
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 340px;
    height: 340px;
    text-align: center;
    background-color: #39a9ed;
  }
  .van-nav-bar {
    width: 100%;
    margin: 0 auto;
    margin-top: 30px;
    background-color: #1a1a1a;
  }
  .van-nav-bar__content {
    height: 80px;
    //
  }
  .van-nav-bar__title {
    height: 80px;
    font-size: 40px;
    line-height: 80px;
    color: #9a9aa4;
  }
  .van-icon-arrow-left {
    font-size: 40px;
    color: #9a9aa4;
  }
  .van-nav-bar__right {
    font-size: 28px;
    color: #9a9aa4;
  }
  .fis {
    width: 95%;
    height: 170px;
    margin: 0 auto;
    margin-top: 50px;
    background-color: #efefef;
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      width: 30%;
      height: 110px;
      text-align: center;
      div {
        width: 60px;
        height: 60px;
        margin: 0 auto;
        background-color: #cecece;
      }
      p {
        font-size: 30px;
        margin: 10px 0;
        color: #cecece;
      }
    }
  }
  .swi {
    width: 95%;
    height: 340px;
    margin: 20px auto;
    background-color: #efefef;
  }
  .list {
    width: 95%;
    margin: 0 auto;
    li {
      width: 100%;
      height: 180px;
      background-color: #efefef;
      padding: 30px 10px;
      color: #cecece;
      font-size: 30px;
      display: flex;
      justify-content: space-around;
      .li-img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #cecece;
        overflow: hidden;
      }
      .li-p {
        width: 300px;
        height: 120px;
        color: black;
        font-weight: normal;
        display: flex;
        flex-direction: column;

        // align-items: center;
        h3 {
          font-size: 28px;
          font-weight: normal;
          
        }
        h4 {
          font-size: 24px;
          font-weight: normal;
          margin: 8px 0;
        }
        p {
          font-size: 24px;
        }
      }
      .li-btn {
        width: 120px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        justify-content: space-around;
        p{
            font-size: 24px;
            text-align: center;
        }
        div{
            width: 100%;
            height: 60px;
            border-radius: 30px;
            text-align: center;
            line-height: 60px;
            color: white;
            background-color: #56bb93;
        }
      }
    }
  }
}
</style>